<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airplane Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #ccc;
        }

        .box {
            text-align: center;
        }

        .myCanvas {
            background-color: #fff;
        }
    </style>

    <script>
        window.onload = function () {
            let myCanvas = document.querySelector('.myCanvas');
            let context = myCanvas.getContext('2d');
            let img = new Image();
            let enemyImg = new Image();
            let x = 250;
            let y = 476;
            let planeWidth = 100;
            let planeHeight = 124;
            let planeMoveSpeed = 5;
            img.src = './images/bigplane.png';
            enemyImg.src = './images/fly.png';
            let bulletArr = [];
            let enemies = [];
            let score = 0;

            function createEnemy() {
                let enemyX = Math.random() * (600 - 50);
                enemies.push({ ex: enemyX, ey: -50 });
            }

            function drawEnemies() {
                enemies.forEach(function (enemy) {
                    enemy.ey += 2;
                    context.drawImage(enemyImg, enemy.ex, enemy.ey, 50, 50);
                });
            }

            function checkCollision(bullet, enemy) {
                return bullet.bx < enemy.ex + 50 &&
                    bullet.bx + 10 > enemy.ex &&
                    bullet.by < enemy.ey + 50 &&
                    bullet.by + 10 > enemy.ey;
            }

            function updateGame() {
                context.clearRect(0, 0, 600, 600);

                bulletArr = bulletArr.filter(function (item) {
                    return item.by >= -10;
                });

                enemies = enemies.filter(function (enemy) {
                    return enemy.ey <= 600;
                });

                bulletArr.forEach(function (bullet, bulletIndex) {
                    bullet.by -= 2;
                    context.fillRect(bullet.bx, bullet.by, 10, 10);

                    enemies.forEach(function (enemy, enemyIndex) {
                        if (checkCollision(bullet, enemy)) {
                            bulletArr.splice(bulletIndex, 1);
                            enemies.splice(enemyIndex, 1);
                            score += 10;
                        }
                    });
                });

                drawEnemies();
                context.drawImage(img, x, y);
                context.fillText("Score: " + score, 10, 20);
            }

            window.onkeydown = function (e) {
                context.clearRect(0, 0, 600, 600);
                switch (e.keyCode) {
                    case 37: x = x <= 0 ? 0 : x - planeMoveSpeed;
                        break;
                    case 39: x = x >= 600 - planeWidth ? 600 - planeWidth : x + planeMoveSpeed;
                        break;
                    case 38: y = y <= 0 ? 0 : y - planeMoveSpeed;
                        break;
                    case 40: y = y >= 600 - planeHeight ? 600 - planeHeight : y + planeMoveSpeed;
                        break;
                    case 32: bulletArr.push({
                        bx: x + planeWidth / 2 - 5,
                        by: y - 10
                    });
                        break;
                }
                context.drawImage(img, x, y);
            }

            setInterval(updateGame, 20);
            setInterval(createEnemy, 1000);
        }
    </script>
</head>

<body>
    <div class="box">
        <canvas class="myCanvas" width="600" height="600"></canvas>
    </div>
</body>

</html>